<template>
  <div class="page_container">
    <NavBar :title="applicationTitle" />

    <div class="bg-white">
      <div class="flex items-center px-[22px] pt-4 pb-4">
        <Avatar :size="48" :src="getIcon" />
        <div>
          <div class="ml-2 max-w-[160px] truncate">{{ getTitle }}</div>
          <div v-if="isGroup" class="ml-2 max-w-[160px] truncate text-sm">
            <span class="text-sub-text">{{ $t('applyJoin') }}:</span>
            <span class="text-primary">{{ application.groupName }}</span>
          </div>
        </div>
      </div>

      <div class="mx-[22px] h-[80px] overflow-hidden rounded-md bg-[#E8EAEF]">
        <div class="px-4 py-2">{{ application.reqMsg }}</div>
      </div>

      <div class="py-3 px-[22px] text-right text-[13px] text-[#666]">
        <span v-if="isGroup">{{ $t('source') }}:{{ joinSource }}</span>
      </div>

      <div class="mb-4 flex flex-row items-center justify-around px-4">
        <van-button
          class="w-[160px]"
          type="default"
          :text="$t('buttons.reject')"
          @click="accessApplication(false)"
        />
        <van-button
          class="w-[160px]"
          type="primary"
          :text="$t('buttons.accept')"
          @click="accessApplication(true)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Avatar from '@/components/Avatar/index.vue'
import {
  ApplicationItemSource,
  ApplicationTypeEnum,
} from '@/components/ApplicationItem/data'
import { GroupJoinSource } from '@openim/wasm-client-sdk'
import { IMSDK } from '@/utils/imCommon'
import { feedbackToast } from '@/utils/common'
import { closeToast, showLoadingToast } from 'vant'

const friendApplicationTypes = [
  ApplicationTypeEnum.RecivedFriendApplication,
  ApplicationTypeEnum.SentFriendApplication,
]

type ApplicationDetailsProps = {
  type: ApplicationTypeEnum
  application: ApplicationItemSource
}

const { t } = useI18n()
const router = useRouter()
const props = defineProps<ApplicationDetailsProps>()

const applicationTitle = friendApplicationTypes.includes(props.type)
  ? t('contactMenu.newFriends')
  : t('contactMenu.newGroup')

const getTitle = computed(() => {
  switch (props.type) {
    case ApplicationTypeEnum.RecivedFriendApplication:
      return props.application.fromNickname
    case ApplicationTypeEnum.SentFriendApplication:
      return props.application.toNickname
    case ApplicationTypeEnum.RecivedGroupApplication:
      return props.application.nickname
    case ApplicationTypeEnum.SentGroupApplication:
      return props.application.groupName
    default:
      return ''
  }
})

const getIcon = computed(() => {
  switch (props.type) {
    case ApplicationTypeEnum.RecivedFriendApplication:
      return props.application.fromFaceURL
    case ApplicationTypeEnum.SentFriendApplication:
      return props.application.toFaceURL
    case ApplicationTypeEnum.RecivedGroupApplication:
      return props.application.userFaceURL
    case ApplicationTypeEnum.SentGroupApplication:
      return props.application.groupFaceURL
    default:
      return ''
  }
})

const isGroup =
  props.type === ApplicationTypeEnum.SentGroupApplication ||
  props.type === ApplicationTypeEnum.RecivedGroupApplication

const joinSource = computed(() => {
  if (props.application.joinSource === GroupJoinSource.Invitation) {
    return t('groupMemberApply')
  }
  if (props.application.joinSource === GroupJoinSource.Search) {
    return t('searchGroupID')
  }
  return t('scanQrCode')
})

const accessApplication = (isAccept: boolean) => {
  showLoadingToast({
    duration: 0,
    forbidClick: true,
    message: t('loading'),
  })
  const funcName = isGroup
    ? `${isAccept ? 'accept' : 'refuse'}GroupApplication`
    : `${isAccept ? 'accept' : 'refuse'}FriendApplication`
  // @ts-ignore
  IMSDK[funcName]({
    groupID: props.application.groupID!,
    fromUserID: props.application.userID!,
    toUserID: props.application.fromUserID!,
    handleMsg: '',
  })
    .then(() => {
      feedbackToast({ onClose: router.back })
    })
    .catch((error: unknown) => feedbackToast({ error }))
    .finally(closeToast)
}
</script>

<style lang="scss" scoped>
:deep(.van-field) {
  background: #eee;
  padding-top: 0;
}

:deep(.van-field__control) {
  font-size: 13px;
  color: #666;
}
</style>
